<template>
  <div class="tabs">
    <el-tabs
      class="tabsEl"
      v-model="tabsMenuValue"
      @tabClick="tabClick"
      @tabRemove="tabRemove"
    >
      <el-tab-pane
        v-for="item in tabsMenuList"
        class="cpane"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="item.close"
      >
        {{ item.title }}</el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { computed, onMounted, ref, watch } from "vue";
import { useTabsStore } from "@/stores/modules/tabs";
import { useMenuStore } from "@/stores/modules/menu";
import { ElTabPane, ElTabs, TabPaneName, TabsPaneContext } from "element-plus";
// import IconMap from "@/config/sideNavIconMap";

const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const authStore = useMenuStore();

const tabsMenuValue = ref(route.fullPath);
const tabsMenuList = computed(() => tabStore.tabsMenuList);

onMounted(() => {
  //   tabsDrop();
  initTabs();
});

// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
watch(
  () => route.fullPath,
  () => {
    if (route.meta.isFull) return;
    tabsMenuValue.value = route.fullPath;
    const tabsParams = {
      icon: route.meta.icon as string,
      title: route.meta.title as string,
      path: route.fullPath,
      name: route.name as string,
      close: !route.meta.isAffix,
      isKeepAlive: route.meta.isKeepAlive as boolean,
    };
    tabStore.addTabs(tabsParams);
  },
  { immediate: true }
);

// 初始化需要固定的 tabs
const initTabs = () => {
  authStore.flatMenuListGet.forEach((item) => {
    if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
      const tabsParams = {
        icon: item.meta.icon,
        title: item.meta.title,
        path: item.path,
        name: item.name,
        close: !item.meta.isAffix,
        isKeepAlive: item.meta.isKeepAlive,
      };
      tabStore.addTabs(tabsParams);
    }
  });
};

// tabs 拖拽排序
// const tabsDrop = () => {
//   Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
//     draggable: ".el-tabs__item",
//     animation: 300,
//     onEnd({ newIndex, oldIndex }) {
//       const tabsList = [...tabStore.tabsMenuList];
//       const currRow = tabsList.splice(oldIndex as number, 1)[0];
//       tabsList.splice(newIndex as number, 0, currRow);
//       tabStore.setTabs(tabsList);
//     },
//   });
// };

// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
  const fullPath = tabItem.props.name as string;
  router.push(fullPath);
};

// Remove Tab
const tabRemove = (fullPath: TabPaneName) => {
  tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
};
</script>

<style scoped lang="scss">
@import "./index.module.scss";
</style>
